import { ref } from "vue"

export const useHeatMap = (map) => {
  const t_radius = ref(10)
  const t_blur = ref(15)
  const vector = ref(null)
  //实现热力图
  const showHeat = ref(false)
  const showHeatMap = () => {

    showHeat.value = !showHeat.value
    if (showHeat.value) {
      //创建一个Heatmap图层
      vector.value = new ol.layer.Heatmap({
        //矢量数据源（读取本地的KML数据）
        source: new ol.source.Vector({
          url: "./event.kml",
          format: new ol.format.KML({
            extractStyles: false,
          }),
        }),
        //热点半径
        radius: parseInt(t_radius.value, 10),
        //模糊尺寸
        blur: parseInt(t_blur.value, 10),
      })
      map.value.addLayer(vector.value)
    } else {
      map.value.removeLayer(vector.value)
    }
  }
  //当热点半径改变时
  const changeRadius = () => {
    //设置热点图层的热点半径
    vector.value.setRadius(parseInt(t_radius.value, 10))
  }
  //当热点模糊尺寸改变时
  const changeBlur = () => {
    //设置热点图层的模糊尺寸
    vector.value.setBlur(parseInt(t_blur.value, 10))
  }
  return { showHeatMap, t_radius, t_blur, changeRadius, changeBlur, showHeat }
}
